<template>
    <div>
        <!--顶部搜索框区域-->
        <div style="margin-top: 20px;" class="header">
            <div style="float: left">
                <el-button type="primary" style="margin-left: 10px;" plain :icon="Plus" @click="add">新增</el-button>
            </div>
            <div style="float: right">
                <div style="display: flex">
                    <el-form-item style="width: 240px;margin-right: 20px">
                        <el-input v-model="searchTerm" placeholder="请输入项目名称" />
                    </el-form-item>
                </div>
            </div>
        </div>

        <!--表单内容区域-->
        <main>
            <el-table :data="filteredData" style="width: 100%; margin-top: 10px;" :cell-style="rowClass"
                      :header-cell-style="headClass" tooltip-effect="dark">
                <el-table-column prop="projectName" label="项目名称" />
                <el-table-column prop="projectManager" label="项目负责人" />
                <el-table-column prop="projectStartTime" label="项目开始时间" />
                <el-table-column prop="projectEndTime" label="项目预期完成时间" />
                <el-table-column prop="projectProgress" label="项目进度" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </main>

        <!--添加对话框-->
        <el-dialog v-model="addVisible" title="添加项目" width="400" center>
            <el-form :model="addInput" label-width="auto" style="width: 100%;">
                <el-form-item label="项目名称">
                    <el-input v-model="addInput.projectName" />
                </el-form-item>
                <el-form-item label="项目负责人">
                    <el-input v-model="addInput.projectManager" />
                </el-form-item>
                <el-form-item label="项目预期完成时间">
                    <el-input v-model="addInput.projectEndTime" type="date" />
                </el-form-item>
                <el-form-item label="项目进度">
                    <el-input v-model="addInput.projectProgress" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="danger" plain @click="closeDialog('add')">取消</el-button>
                    <el-button type="primary" @click="addProjectK">确认</el-button>
                </div>
            </template>
        </el-dialog>

        <!--编辑对话框-->
        <el-dialog v-model="editVisible" title="编辑项目" width="400" center>
            <el-form :model="editInput" label-width="auto" style="width: 100%;" :label-position="'left'">
                <el-form-item label="项目名称">
                    <el-input v-model="editInput.projectName" />
                </el-form-item>
                <el-form-item label="项目负责人">
                    <el-input v-model="editInput.projectManager" />
                </el-form-item>
                <el-form-item label="项目预期完成时间">
                    <el-input v-model="editInput.projectEndTime" type="date" />
                </el-form-item>
                <el-form-item label="项目进度">
                    <el-input v-model="editInput.projectProgress" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="danger" plain @click="closeDialog('edit')">取消</el-button>
                    <el-button type="primary" @click="editProjectK">确认</el-button>
                </div>
            </template>
        </el-dialog>

        <!--删除对话框-->
        <el-dialog v-model="deleteVisible" title="确认删除?" width="200" center>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="danger" plain @click="closeDialog('delete')">取消</el-button>
                    <el-button type="primary" @click="deleteProjectK">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { getProjects, deleteProject, addProject, editProject } from "@/api/api.js";
import { ElMessage } from "element-plus";

// 搜索相关
const searchTerm = ref('')

// 表格样式调整
const rowClass = () => ({ 'text-align': 'center' })
const headClass = () => ({ 'text-align': 'center', background: '#f8f8f9' })

// 表格数据
const tableData = ref([])

// 过滤后的数据，用于前端搜索
const filteredData = computed(() => {
    if (!searchTerm.value) return tableData.value;
    return tableData.value.filter(item => item.projectName.includes(searchTerm.value));
})

const initData = () => {
    getProjects().then(res => {
        tableData.value = res.data
    })
}
onMounted(() => {
    initData()
})

// 搜索功能（前端实现）

// 新增项目
const addVisible = ref(false)
let addInput = reactive({
    projectName: "",
    projectManager: "",
    projectProgress: "",
    projectEndTime: "",
})
const add = () => {
    addVisible.value = true
}

const addProjectK = () => {
    addProject(addInput).then(res => {
        if (res.data) {
            ElMessage.success("添加成功")
        } else {
            ElMessage.warning("添加失败,请稍后再试")
        }
    }).catch(() => {
        ElMessage.error("添加失败")
    }).finally(() => {
        resetForm(addInput)
        initData()
        addVisible.value = false
    })
}

// 删除项目
const deleteVisible = ref(false)
const deleteId = ref('')
const handleDelete = (scope) => {
    deleteId.value = scope.id
    deleteVisible.value = true
}
const deleteProjectK = () => {
    deleteProject({ id: deleteId.value }).then(res => {
        if (res.data) {
            ElMessage.success("删除成功")
        } else {
            ElMessage.warning("操作失败,请稍后再试")
        }
    }).catch(() => {
        ElMessage.error("操作失败")
    }).finally(() => {
        initData()
        deleteVisible.value = false
    })
}

// 编辑项目
const editVisible = ref(false)
let editInput = reactive({
    projectName: "",
    projectManager: "",
    projectProgress: "",
    projectEndTime: "",
})
const handleEdit = (scope) => {
    Object.assign(editInput, scope)
    editVisible.value = true
}
const editProjectK = () => {
    editProject(editInput).then(res => {
        if (res.data) {
            ElMessage.success("编辑成功")
        } else {
            ElMessage.warning("操作失败,请稍后再试")
        }
    }).catch(() => {
        ElMessage.error("操作失败")
    }).finally(() => {
        resetForm(editInput)
        initData()
        editVisible.value = false
    })
}

// 表单重置
const resetForm = (form) => {
    Object.keys(form).forEach(key => {
        form[key] = ''
    })
}

// 关闭对话框并清空表单
const closeDialog = (type) => {
    if (type === 'add') addVisible.value = false
    if (type === 'edit') editVisible.value = false
    if (type === 'delete') deleteVisible.value = false
    resetForm(addInput)
    resetForm(editInput)
}

</script>

<style scoped>
.header > div {
    margin-left: 10px;
}
</style>
